<template>
  <!--学习资料-->
  <div id="questionBank">
    <!--左边树状-->
    <div class="tree-shape">
      <div class="tree-top">
        <img src="@/assets/images/class/data.png" alt="">
        学习资料
      </div>

      <div style="text-align: center;border-bottom: 1px solid #E5E5E5;height: 90px;line-height: 90px;">
        <el-input
          placeholder="请输入法律法规名称"
          prefix-icon="el-icon-search"
          v-model="valueName1"
          style="height: 48px;width: 200px;font-size: 15px;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: 15px;"
        >
        </el-input>
        <div class="sx-btn" @click="changeType1">筛选</div>
      </div>

      <div v-for="(item,index) in treeList" :key="index" class="f-li" @click="openInfo(item,3)">
        <!--一级-->
        <div class="tree-f">
          <img src="@/assets/images/class/file-big.png" alt="">
          <span class="ccsl">{{item.name}}</span>
          <!--<i class="el-icon-arrow-right" v-if="treeIndex != item.id && item.child.length != 0"></i>-->
          <i class="el-icon-arrow-right"></i>
          <!--<i class="el-icon-arrow-down"></i>-->
        </div>
       <!--二级-->
        <!--<div class="t-ul" v-if="treeIndex == item.id" :style="{borderBottom:item.child.length==0 || index==treeList.length-1?'':'1px solid #e5e5e5'}">-->
          <!--<div class="t-li" v-for="(item1,index1) in item.child">-->
            <!--<img src="@/assets/images/class/file-small.png" alt="">-->
            <!--<span class="ccsl">{{item1.title}}</span>-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <el-pagination
        @current-change="handleCurrentChange1"
        :current-page.sync="pagination1.currentPage"
        :page-size="10"
        layout="total, pager"
        :total="pagination1.total"
      style="margin-top: 60px">
      </el-pagination>
    </div>
    <!--右边列表-->
    <div class="list-right">
      <!--头部筛选-->
      <div class="list-top">
        <!--<span>时间</span>-->
        <!--<img src="@/assets/images/class/down.png" alt="">-->
        <span>资料名称</span>
        <el-input
          placeholder="请输入资料名称"
          prefix-icon="el-icon-search"
          v-model="valueName"
          style="height: 48px;width: 200px;font-size: 15px;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: 15px;"
        >
        </el-input>
        <span>资料类型</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="sx-btn" @click="changeType">筛选</div>
      </div>
      <!--列表-->
      <div class="list-b">
        <div v-for="item in dataList">
          <div class="list-c">
            <div class="list-tit ccsl">
              {{item.charName || item.videoName}}
              <span>积分 ：{{item.videoIntegral || item.charIntegral}}</span>
              <span>学时 ：{{item.period}}</span>
            </div>
            <div class="list-parameter">
              <span>{{item.uploadTime}}</span>
              <span>浏览量 ：{{item.pageViews}}</span>
              <span v-if="item.docId" style="display: inline-block;max-width: 330px;vertical-align: top" class="ycyc">相关资料 ：{{item.docName}}</span>
            </div>
            <div class="parameter-btn" v-if="item.docId" @click="openInfo(item,0)">查看资料</div>
            <div class="parameter-btn" v-else @click="openInfo(item,1)">观看资料</div>
          </div>
        </div>
      </div>
      <!--分页器-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="pagination.total"
        prev-text="上一页"
        next-text="下一页">
      </el-pagination>
    </div>

    <!--内容-->
    <div class="black-block" v-if="nowHtmlShow">
      <div class="cen">
        <p>{{info.charName || info.videoName || info.name}}</p>
        <i class="el-icon-close" @click="nowHtmlShow = false,info = {}"></i>
        <div v-html="info.charInfo" v-if="type==0"></div>
        <p v-else-if="type==3" style="width: 95%;margin: 0 auto">{{info.intro}}</p>
        <video style="width: 100%;height: 500px;" controls="controls" autoplay :src="$store.state.prefixImg + info.videoFilePath" v-else></video>
      </div>
    </div>
  </div>
</template>
<script>
  import { getPageViews,insertIntegrals,oneWatchRecord,updateEachPeriods} from '@/utils'
  import {queryInfoDocI,studyQueryChars,studyQueryVideos,queryWatchRecord,insertWatchRecord} from '@/request/api'
  export default {
    name: 'questionBank',
    data () {
      return {
        treeList: [],
        treeIndex: null,
        valueName: '',
        value: '图文资料',
        options: [
          {value: '图文资料',label: '图文资料'},
          {value: '视频资料',label: '视频资料'},
        ],
        dataList: [],
        valueName1:'',
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
        pagination1: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
        nowHtmlShow: false,
        type: 0,//0：文字资料，1：视频资料
      }
    },
    watch: {
      nowHtmlShow(value) {
          if(value) {
            // 半分钟后资料浏览量加一
              setTimeout(e=> {
                if(this.nowHtmlShow) {
                  getPageViews(this.info, 2)
                }
              },30000)

            // 加积分、学时
             if(this.type==0) {
                   setTimeout(e => {
                     if(this.nowHtmlShow && this.type==0) {
                       if (JSON.parse(localStorage.getItem('userInfo')).integral != null) {
                         var period = Number(JSON.parse(localStorage.getItem('userInfo')).integral) + Number(this.info.charIntegral)
                         insertIntegrals(period, this.info.id, this.info.charName, 2)
                       } else {
                         insertIntegrals(Number(this.info.charIntegral), this.info.id, this.info.charName, 2)
                       }
                       //            学时更新
                       if(JSON.parse(localStorage.getItem('userInfo')).period != null) {
                         var period = Number(JSON.parse(localStorage.getItem('userInfo')).period) + Number(this.info.period)
                         updateEachPeriods(period)
                       }else {
                         updateEachPeriods(Number(this.info.period))
                       }
                     }
                   }, 60000)
             }else {
               setTimeout(e=> {
                 if(this.nowHtmlShow && this.type==1) {
                   if (JSON.parse(localStorage.getItem('userInfo')).integral != null) {
                     var period = Number(JSON.parse(localStorage.getItem('userInfo')).integral) + Number(this.info.videoIntegral)
                     insertIntegrals(period, this.info.id, this.info.videoName, 2)
                   } else {
                     insertIntegrals(Number(this.info.videoIntegral), this.info.id, this.info.videoName, 2)
                   }
                   //            学时更新
                   if(JSON.parse(localStorage.getItem('userInfo')).period != null) {
                     var period = Number(JSON.parse(localStorage.getItem('userInfo')).period) + Number(this.info.period)
                     updateEachPeriods(period)
                   }else {
                     updateEachPeriods(Number(this.info.period))
                   }
                 }
               },60000)
             }
          }
      }
    },
    created() {
      this.getList1()
      this.getList2()
    },
    methods: {
      //          获取左侧资料
      getList1() {
        const loading = this.openLoading();
        let paramster = {
          "_search": true,
          "bgTm": "",
          "data": {
            "courseCount": '',
            "del": '',
            "id": '',
            "intro": "",
            "name": ""
          },
          "endTm": "",
          "pageNumber":this.pagination1.currentPage,
          "pageSize": 10
        }
        queryInfoDocI(paramster).then(res=> {
          if(res.code == 200) {
            this.treeList = res.data.records
            this.pagination1.total = res.data.total
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      //          获取文字资料
      getList2() {
        const loading = this.openLoading();
        let paramster = {
          "_search": true,
          "bgTm": "",
          "data": {
            "charInfo": "",
            "charIntegral": "",
            "charName": this.valueName,
            "docId": '',
            "docIntro": "",
            "docName": "",
            "id": '',
            "infoId": '',
            "pageRank": '',
            "pageViews": '',
            "type": '',
            "uploadTime": ""
          },
          "endTm": "",
          "pageNumber": this.pagination.currentPage,
          "pageSize": 10,
          type: 0,//上下架状态
        }
        studyQueryChars(paramster).then(res=> {
          if(res.code == 200) {
            this.dataList = res.data.records
            this.pagination.total = res.data.total
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      //          获取视频资料
      getList3() {
        const loading = this.openLoading();
        let paramster = {
          "_search": true,
          "bgTm": "",
          "data": {
            "id": '',
            "infoId":'',
            "pageRank": '',
            "pageViews": '',
            "type": '',
            "uploadTime": "",
            "videoFileName": "",
            "videoInfo": "",
            "videoIntegral": "",
            "videoName": this.valueName,
          },
          "endTm": "",
          "pageNumber": this.pagination.currentPage,
          "pageSize": 10,
          type: 0,//上下架状态
        }
        studyQueryVideos(paramster).then(res=> {
          if(res.code == 200) {
            this.dataList = res.data.records
            this.pagination.total = res.data.total
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
//      筛选
      changeType1() {
        this.pagination1.currentPage = 1
        this.getList1()
      },
      changeType() {
        this.pagination.currentPage = 1
        if(this.value == '图文资料') {
          this.getList2()
        }else {
          this.getList3()
        }
      },
      //      换页
      handleCurrentChange1(val) {
        this.pagination1.currentPage = val
        console.log(`当前页: ${val}`);
        this.getList1()
      },
      //      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        console.log(`当前页: ${val}`);
        if(this.value == '图文资料') {
          this.getList2()
        }else {
          this.getList3()
        }
      },
//      查看详情
      openInfo(item,type) {
          if(type==3) {
            this.type = type
            this.info = item
            this.nowHtmlShow = true
          }else {
            if(type==0) {
              var types = 2
            }else{
              var types = 1
            }
//        查询是否为第一次看
            var params = {
              "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
              "id": '',
              "time": "",
              "type": types,
              "watchId": item.id
            }
            queryWatchRecord(params).then(res=> {
              if(res.code==200) {
//                第一次查看,插入记录
                if(res.data.length==0) {
                  oneWatchRecord(item,types)
                }
              }
              this.type = type
              this.info = item
              this.nowHtmlShow = true
            })
          }
      }
    }
  }
</script>

<style scoped>
  .sx-btn {
    width: 100px;
    height: 40px;
    background: #22944E;
    box-shadow: 2px 6px 12px 0px rgba(34, 148, 78, 0.2);
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    margin-left: 15px;
    display: inline-block;
    color: #fff;
    cursor: pointer;
  }
  #questionBank {
    padding-top: 40px;
    box-sizing: border-box;
  }
.tree-shape {
  width: 380px;
  height: 1100px;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px 0px rgba(44, 73, 55, 0.11);
  box-sizing: border-box;
  display: inline-block;
}
  .tree-shape .tree-top {
    width: 380px;
    height: 60px;
    line-height: 60px;
    background: #22944E;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .tree-shape .tree-top img {
    margin-right: 15px;
    vertical-align: middle;
  }
  .tree-shape  .f-li {
    list-style: none;
    line-height: 70px;
    width: 100%;
    box-sizing: border-box;
  }
  .tree-shape  .f-li .tree-f {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #E5E5E5;
    cursor: pointer;
  }
  .tree-shape  .f-li .tree-f:hover {
    background: rgba(34, 148, 78, 0.2);
  }
  .tree-shape  .f-li img {
    vertical-align: middle;
    margin-right: 16px;
    margin-left: 20px;
  }
  .tree-shape  .f-li span {
    vertical-align: middle;
    font-size: 18px;
    display: inline-block;
    width: 60%;
  }
  .tree-shape  .f-li i {
    vertical-align: middle;
    float: right;
    color: #9A9A9A;
    font-size: 20px;
    margin-top: 28px;
    margin-right: 20px;
  }
  .tree-shape  .f-li .t-ul .t-li {
    list-style: none;
    line-height: 60px;
    width: 100%;
    padding: 0 20px 0 40px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .tree-shape  .f-li .t-ul .t-li:hover {
    background: rgba(34, 148, 78, 0.2);
  }
  .tree-shape  .f-li .t-ul .t-li img {
    vertical-align: middle;
    margin-right: 12px;
  }
  .tree-shape  .f-li .t-ul .t-li span {
    vertical-align: middle;
    font-size: 16px;
    display: inline-block;
    width: 60%;
  }


  .list-right {
    width: calc(100% - 400px);
    /*width: 100%;*/
    margin-left: 20px;
    display: inline-block;
    float: right;
  }
  .list-top {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: #fff;
    font-size: 18px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .list-top span  {
    vertical-align: middle;
    margin-right: 15px;
  }
  .list-top img {
    vertical-align: middle;
    margin-right: 60px;
  }
  .list-top /deep/ .el-select {
    width: 110px;
  }
  .list-top .sx-btn {
    width: 100px;
    height: 40px;
    background: #22944E;
    box-shadow: 2px 6px 12px 0px rgba(34, 148, 78, 0.2);
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    margin-left: 15px;
    display: inline-block;
    color: #fff;
    cursor: pointer;
  }
  .list-b {
    width: 100%;
    background: #fff;
    font-size: 18px;
    margin: 20px 0;
    box-sizing: border-box;
  }
  .list-b .list-c {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #e5e5e5;
    padding: 24px 20px 0 20px;
    box-sizing: border-box;
    position: relative;
  }
  .list-b .list-tit {
    width: 620px;
    font-size: 20px;
    margin-bottom: 10px;
    display: inline-block;
    position: absolute;
    left: 20px;
  }
  .list-b .list-tit span {
    font-size: 16px;
    display: inline-block;
    color: #9A9A9A;
    margin-left: 20px;
  }
  .list-b .list-parameter {
    font-size: 16px;
    display: inline-block;
    color: #9A9A9A;
    position: absolute;
    left: 20px;
    bottom:16px;
  }
  .list-b .list-parameter span {
    margin-right: 20px;
  }
  .list-b .parameter-btn {
    width: 120px;
    height: 40px;
    background: #22944E;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    float: right;
    display: inline-block;
    margin-top: -30px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    bottom:30px;
  }
</style>
